<template>
	<view class="page pages">
		<!-- 顶部空余 -->
		<view style="width: 100%;height: var(--status-bar-height);background-color: #2b2c3c;"></view>
		<view class="order_header">
			<view class="back">
				<uni-icons type="back" size="24" color="#fff" @tap="back"></uni-icons>
			</view>
			<view class="order_title">{{info.status_str}}</view>
			<view class="order_info">{{info.status_desc}}</view>
		</view>
		<view class="cause">
			<view class="flex_be" @click="openPopup">
				<view>{{$t('order.ReturnLogistics.Company')}}</view>
				<view :style="!!form.expcompany?'color: #000;':'color: #ccc;'">{{form.expcompany||$t('order.ReturnLogistics.pChoose')}} <uni-icons type="forward" color="#ccc"></uni-icons> </view>
			</view>
			<view class="flex_be">
				<view>{{$t('order.ReturnLogistics.dNum')}}</view>
				<input type="text" :placeholder="$t('order.ReturnLogistics.Num')" v-model="form.expno">
			</view>
		</view>
		<view class="btn">
			<view class="btn_btn">
				<view @click="serviceDeliveryadd">{{$t('order.ReturnLogistics.Submit')}}</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup-content">
				<view class="flex_be popup_fix">
					<view></view>
					<view style="font-weight: bold;">{{$t('order.ReturnLogistics.Choose')}}</view>
					<uni-icons type="closeempty" @click="closePopup"></uni-icons>
				</view>
				<view class="flex_be" v-for="item in typeList" :key="item.id" @click="typeClick(item)">
					<view>{{item.name}}</view>
					<view :class="typeAct==item.id?'popup-box popup-active':'popup-box'">
						<uni-icons type="checkmarkempty" size="10" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { serviceDelivery, serviceDeliveryadd } from '@/api/api.js'
	export default {
		data() {
			return {
				info: {},
				form: {},
				typeAct: null,
				typeList: [],
			};
		},
		onLoad(option) {
			this.form.serid = option.id
			serviceDelivery({
				token: uni.getStorageSync('token'),
				serid: option.id
			}).then(res=>{
				this.typeList = res.data.data.expcomany
				this.info = res.data.data
			})
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			typeClick(item){
				this.form.expcompany = item.name
				this.typeAct = item.id
				setTimeout(() => {
					this.closePopup()
				}, 100)
			},
			serviceDeliveryadd(){
				serviceDeliveryadd({
					token: uni.getStorageSync('token'),
					serid: this.form.serid,
					expcompany: this.form.expcompany,
					expno: this.form.expno
				}).then(res=>{
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/shop/order/afterSale'
						})
					}, 600)
				})
			},
			openPopup() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	.flex{
		display: flex;
		align-items: center;
	}
	.flex_be{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.page{
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f5f5f9;
	}
	.order_header {
		width: 100%;
		background-color: #2b2c3c;
		color: #fff;
		padding: 40rpx 40rpx 90rpx;
	
		.back {
			height: 48rpx;
			display: flex;
			align-items: center;
	
			.uni-icons {
				transform: translate(-20%, 0);
			}
		}
	
		.order_title {
			font-size: 44rpx;
			margin-top: 30rpx;
		}
	
		.order_info {
			font-size: 24rpx;
			line-height: 26rpx;
			opacity: 0.9;
			font-weight: 400;
			margin-top: 30rpx;
		}
	}
	.cause{
		width: 94%;
		position: relative;
		top: -60rpx;
		left: 3%;
		right: 3%;
		background-color: #fff;
		padding: 0 40rpx;
		&>view{
			padding: 30rpx 0;
		}
		input{
			border-bottom: #ddd solid 1rpx;
			text-align: right;
		}
	}
	.btn{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		.btn_btn{
			background-color: #fff;
			padding: 20rpx;
			&>view{
				background-color: #00C2C2;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
			}
		}
	}
	.popup-content{
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 80rpx 20rpx 100rpx;
		max-height: 60vh;
		overflow: auto;
		&>view{
			height: 100rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #ddd;
		}
		&>view:first-child{
			border-bottom: none;
		}
		.popup_fix{
			position: fixed;
			top: 0;
			left: 20rpx;
			right: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
		}
		.popup-box{
			width: 30rpx;
			height: 30rpx;
			border-radius: 30rpx;
			border: 1rpx solid #ddd;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.popup-active{
			background-color: #00C2C2;
			border: none;
		}
	}
</style>
